<template>
    <div class="footer-container">
        <RouterLink
            v-for="(item, index) in footerList"
            :key="index"
            :to="{}"
            active-class="selected"
            exact-active-class=""
        >
            <span>{{ item.title }}</span
            >|
        </RouterLink>
        <div class="record">
            <img :src="require('@/assets/images/record_icon.png')" />
            公网安备 330XXXXXXXX123号
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            footerList: [
                {
                    name: "About",
                    title: "关于智慧城建",
                },
                {
                    name: "Contact",
                    title: "联系客服",
                },
                {
                    name: "Open",
                    title: "开放平台意见反馈",
                },
                {
                    name: "Law",
                    title: "法律声明及隐私权政策",
                },
            ],
        };
    },
};
</script>

<style scoped lang="less">
.footer-container {
    width: 100%;
    background: #121317;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
        color: #98a5b2;
        font-size: 12px;
        padding: 0 0 0 15px;
        display: block;
        position: relative;
        &:hover {
            font-weight: 600;
        }
        span {
            padding-right: 15px;
        }
    }
    .record {
        display: flex;
        color: #98a5b2;
        font-size: 12px;
        margin-left: 15px;
        img {
            margin-right: 5px;
        }
    }
}
</style>